<script setup lang="ts">
// 导入导航链接数据
import { headNavLinks } from '../../utils/menu';
</script>

<template>
  <!-- 导航栏组件 -->
 <div class="w-full flex flex-row bg-black/90 backdrop-blur-sm py-3 lg:py-4 shadow-lg border-b border-gray-800">
    <!-- 左侧Logo区域 -->
    <div class="basis-1/5 flex items-center px-2 sm:px-4 lg:px-6 xl:px-8">
      <img src="@/assets/logo.png" alt="logo" class="w-full h-8 sm:h-10 sm:w-10 lg:h-12 lg:w-12 rounded-lg shadow-md transition-transform duration-300 hover:scale-105">
      <span class="ml-2 text-xl sm:text-2xl font-bold text-gray-200 hidden sm:block"></span>
    </div>
    <!-- 中间导航链接区域 -->
    <div class="basis-3/5 flex items-center justify-center">
      <!-- 循环渲染导航链接 -->
      <RouterLink 
        :to="item.path" 
        v-for="item in headNavLinks" 
        :key="item.path"
        class="px-2 sm:px-4 lg:px-6 xl:px-8 whitespace-nowrap transition-all duration-300"
        active-class="text-yellow-400"
      >
        <div class="flex flex-col items-center justify-center">
          <!-- 文字悬停效果容器 -->
          <span class="text-lg sm:text-xl lg:text-2xl font-semibold relative group">
            <!-- 底层文字：白色，悬停时变透明 -->
            <span class="relative z-10 text-gray-200 transition-all duration-300 group-hover:text-transparent">
              {{ item.name }}
            </span>
            <!-- 顶层文字：黄色渐变效果 -->
            <span class="absolute inset-0 bg-gradient-to-r from-yellow-400 to-amber-500 bg-clip-text text-transparent opacity-0 group-hover:opacity-100 transition-all duration-500 transform group-hover:translate-y-[-2px]">
              {{ item.name }}
            </span>
            <!-- 下划线指示器 -->
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-yellow-400 to-amber-500 transition-all duration-300 group-hover:w-full"></span>
          </span>
        </div>
      </RouterLink>
    </div>
    <!-- 右侧登录按钮区域 -->
    <div class="basis-1/5 flex justify-end pr-2 sm:pr-4 lg:pr-6 xl:pr-8">
      <!-- <button type="button" class="px-4 py-2 text-white bg-gradient-to-r from-blue-500 to-purple-600 rounded-full shadow-md transition-all duration-300 hover:scale-105 hover:shadow-lg">登录</button> -->
    </div>
 </div>

</template>

<style scoped>

</style>
